<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>
    <input id="user" type="text">
    <span id="user_span"></span>
  </p>
  <p><input type="button" id="btn" value="注册"></p>
</body>
<script>
  // 用户名注册验证要求
  // 由数字 大小写字母 下划线 组成 6-12位, 且不能以数字开头 不能含有非法字符

  // 1. 由数字 大小写字母 下划线 组成(不能含有非法字符)
  // 2. 6-12位
  // 3. 不能以数字开头

  // 按照从易到难的顺序
  // a. 6-12位
  // b. 验证开头(不能以数字开头)
  // c. 由数字 大小写字母 下划线 组成(不能含有非法字符)


  // 非法字符(数字 大小写字母 下划线 以外的字符)

  // 1. JS操作元素之前必须先获取元素
  var userInp = document.getElementById("user");
  var userSpan = document.getElementById("user_span");
  var btn = document.getElementById("btn");

  // 2. 绑定点击事件  =>
  btn.onclick = function () {
    // 3. 点击取值
    var user = userInp.value;  //表单元素的取值(字符串)
    console.log(user);

    // 4. 验证长度6-12位
    if (user.length >= 6 && user.length <= 12) {
      // userSpan.innerText = "√";
      // userSpan.style.fontSize = "12px";
      // userSpan.style.color = "green";

      // 5. 是否以数字开头
      // var firstChar = user.charAt(0); // 取第一个字符
      // 1. 获取第一个字符对应的ascii编码(48-57 是数字) 否则 不是数字
      // 2. 创建一个纯数字数组  ["1","2","3"...."9"]  => 获取第一个字符, 判断在数组中是否存在  
      // 3. isNaN()

      // 第一种
      // var firstCharCode =  user.charCodeAt(0);  //第一个字符对应的编码
      // if(!(firstCharCode>=48 && firstCharCode <= 57)){ //不是数字
      //     userSpan.innerText = "√";
      //     userSpan.style.fontSize = "12px";
      //     userSpan.style.color = "green";
      // }else{  //是数字
      //     userSpan.innerText = "用户名不能以数字开头";
      //     userSpan.style.fontSize = "12px";
      //     userSpan.style.color = "red";
      // }

      // 第二种
      // var numList = ["0","1","2","3","4","5","6","7","8","9"];

      // // 简化版 
      // var numList = [];
      // for(var i=48;i<=57;i++){
      //     var char = String.fromCharCode(i); //根据编码返回对应的字符
      //     numList.push(char);
      // }
      // console.log(numList);

      // var firstChar = user.charAt(0); // 取第一个字符(字符串) "1" ,"a"
      // if(numList.indexOf(firstChar)==-1){  //不存在  => 不是以数字开头
      //     userSpan.innerText = "√";
      //     userSpan.style.fontSize = "12px";
      //     userSpan.style.color = "green";
      // }else{
      //     userSpan.innerText = "用户名不能以数字开头";
      //     userSpan.style.fontSize = "12px";
      //     userSpan.style.color = "red";
      // }

      // 第三种 isNaN()  => 非数组:true  数字:false
      var firstChar = user.charAt(0); // 取第一个字符(字符串)
      if (isNaN(firstChar)) {
        userSpan.innerText = "√";
        userSpan.style.fontSize = "12px";
        userSpan.style.color = "green";
      } else {
        userSpan.innerText = "用户名不能以数字开头";
        userSpan.style.fontSize = "12px";
        userSpan.style.color = "red";
      }




    } else {
      userSpan.innerText = "用户名需要在6-12位之间";
      userSpan.style.fontSize = "12px";
      userSpan.style.color = "red";
    }

  }


  //  innerText   获取和设置非表单元素(div span ul)的文本内容
  //  innerHTML   获取和设置非表单元素的html结构

  // JS操作元素改变样式时,都是通过内联style实现的






</script>

</html>